<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>组件</title>
  </head>
  <body>
    <div id="app">
      <!-- 使用组件，页面中只能使用短横线方式 -->
      <my-root></my-root>
    </div>
    <!-- 定义组件模板 -->
    <template id="root">
      <div style="width: 100%; height: 600px; background-color: aqua">
        <my-header></my-header>
      </div>
    </template>
    <template id="header">
      <header style="height: 100px; background-color: blue"></header>
    </template>

    <script src="../lib/vue.global.js"></script>
    <script>
      //定义组件
      const Header = {
        template: "#header",
      };
      const Root = {
        template: "#root",
        components: {
          //局部注册组件
          "my-header": Header,
        },
      };
      const app = Vue.createApp({});
      //注册组件
      //组件名字两种方式 驼峰命名（MyRoot） 短横线连接（my-root）
      app.component("MyRoot", Root);
      app.mount("#app");
    </script>
  </body>
</html>
